<template>
  <div class="login">
    <!-- 用于显示名字 -->
    <div class="header">
      <p class="title">灵动教学台</p>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 放图片 -->
      <div class="content-left">
        <img src="../../static/logo.jpg" class="img-bg">
      </div>
      <!-- 放表单 -->
      <div class="content-right">
        <!-- 注册 -->
        <div class="content-right-title">注册</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
          class="demo-ruleForm myform">

          <el-form-item label="用户名" prop="username">
            <el-input v-model.number="ruleForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请再次输入密码"></el-input>
          </el-form-item>

          <input type="hidden" name="csrfmiddlewaretoken" :value="csrfToken">

          <el-form-item>
            <el-button type="primary" :plain="true" @click="login">注册</el-button>
            <el-button @click="toLogin">登录</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  data () {
    const checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight,
      ruleForm: {
        pass: '',
        checkPass: '',
        username: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ],
        csrfToken: ''
      }
    }
  },
  computed: {
    ...mapState
  },
  methods: {
    getCookie (name) {
      let cookieValue = null
      if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';')
        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i].trim()
          // 获取名为csrftoken的cookie值
          if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
            break
          }
        }
      }
      return cookieValue
    },
    handleResize () {
      this.fullWidth = document.documentElement.clientWidth
      this.fullHeight = document.documentElement.clientHeight
    },
    toLogin () {
      this.$router.push('/login')
    },
    async login () {
      const myform = {
        username: this.ruleForm.username,
        password: this.ruleForm.pass
      }
      console.log(myform)
      if (this.ruleForm.checkPass === this.ruleForm.pass && this.ruleForm.checkPass && this.ruleForm.username && this.ruleForm.pass) {
        const res = await axios.post('http://127.0.0.1:8000/api/login_app/register/', myform)// 发请求
        if (res.data.msg.status === 'true') {
          console.log(res)
          // 写缓存
          localStorage.setItem('username', this.ruleForm.username)
          // 交仓库
          this.$store.state.name = this.ruleForm.username
          // 提示框
          this.$message({
            message: '注册成功',
            type: 'success'
          })
          // 去登录页面
          this.$router.push('/home')
        } else {
          this.$message({
            message: '已注册用户',
            type: 'error'
          })
        }
      }
    }
  },
  created () {
    window.addEventListener('resize', this.handleResize)
    this.csrfToken = this.getCookie('csrftoken')
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>
